<html>
  <head>
  <script>

  function writeLog(str) {
    console.log(str)
    var logDiv = document.getElementById("output")
    logDiv.innerHTML = logDiv.innerHTML + "<br/>" + str
  }

  function logKeyEvent(e, type) {
    writeLog(type + ": " + e.keyCode + ", " + e.charCode + ", " + e.which)
  }

  function handleKeyDown(e) {
    logKeyEvent(e, "handleKeyDown")
  }

  function handleKeyPress(e) {
    logKeyEvent(e, "handleKeyPress")
  }

  function handleKeyUp(e) {
    logKeyEvent(e, "handleKeyUp")
  }

  function end(e) {
    writeLog("end: " + e.data)
  }

  function start(e) {
    writeLog("start: " + e.data)
  }

  function update(e) {
    writeLog("update: " + e.data)
  }

  function init() {
    try {
      var textArea = document.getElementById("emptyTextArea");
      textArea.addEventListener("compositionstart", start, true);
      textArea.addEventListener("compositionupdate", update, true);
      textArea.addEventListener("compositionend", end, true);
      textArea.addEventListener("keypress", handleKeyPress, true);
      textArea.addEventListener("keydown", handleKeyDown, true);
      textArea.addEventListener("keyup", handleKeyUp, true);

      var numberField = document.getElementById("numberField");
      numberField.addEventListener("compositionstart", start, true);
      numberField.addEventListener("compositionupdate", update, true);
      numberField.addEventListener("compositionend", end, true);
      numberField.addEventListener("keypress", handleKeyPress, true);
      numberField.addEventListener("keydown", handleKeyDown, true);
      numberField.addEventListener("keyup", handleKeyUp, true);
    } catch(ex) {}
  }
  </script>

  <style type="text/css">
    input {width:100%;height:100%;}
  </style>
  </head>
  <body onload="init()">
    <div style="position:relative;width:50%;top:30px;left:20px;height:30px;">
      <input type="text" value="Top left 50% width" tabindex="2">
    </div>
    <div style="position:relative;width:600px;height:20px;top:100px;">
      <input type="text" value="20px height short 1st" style="position:relative;width:100px;left:40px;" tabindex="3">
      <input type="text" value="20px height short 2nd" style="position:relative;width:100px;left:240px;" tabindex="4">
      <input type="password" placeholder="Input password" style="position:relative;width:100px;left:460px;" tabindex="5">
    </div>
    <div style="position:relative;width:640px;height:40px;top:300px;left:40px">
      <input type="text" value="90% width centered 40px height" autofocus tabindex="1">
    </div>
    <center><div style="position:relative;width:20px;height:20px;top:650px">
      <input type="text" value="20px" tabindex="4">
    </div></center>


    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <textarea rows="4" cols="50" style="width:200px;height:150px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dapibus congue. Maecenas nisl mi, scelerisque at sollicitudin at, porttitor in diam. In vehicula euismod nulla vitae congue. Morbi gravida arcu vehicula dictum condimentum. Donec congue, ante a pretium pellentesque, enim libero laoreet magna, ac ultricies nulla magna et nulla. Sed pretium tincidunt nibh, non ornare massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan convallis felis, non rhoncus purus.

    Maecenas mollis tincidunt ultrices. Nullam vel arcu et sem malesuada tempor ac a elit. Aliquam elementum tortor malesuada, ornare elit in, viverra augue. Proin laoreet lobortis nulla, quis.
    </textarea>

    <div id="output"></div>

    <br/><br/>
    <textarea id="emptyTextArea" rows="4" cols="50" style="width:200px;height:150px"></textarea>
    <br/><br/>

    <div style="position:relative;width:200px;height:40px">
      <input id="numberField" type="number" value="input number"></input>
    </div>
    <br/><br/>

    <div style="position:relative;width:200px;height:40px">
      <input id="fileField" type="file"></input>
    </div>
    <br/><br/>

    <!-- Some lorem ipsum text -->
    <p contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec tristique orci, sit amet faucibus urna. In semper facilisis sapien eget cursus. Aliquam mattis sagittis tellus quis hendrerit. Donec orci libero, rhoncus at tortor at, rutrum volutpat neque. Pellentesque lobortis nec quam id tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam feugiat quam in lectus egestas, et suscipit est malesuada. Mauris eget lacus et purus dignissim malesuada. Aenean volutpat placerat magna vel pretium.
    </p>
    <p contenteditable="true">
    Curabitur pretium eu purus vitae pharetra. Mauris congue dolor vitae dolor rhoncus sodales. Vestibulum accumsan mi lectus, vel dictum lacus adipiscing vel. Cras ut molestie lorem. Nullam volutpat velit eu ligula hendrerit bibendum. Vestibulum gravida felis vel blandit dictum. Curabitur aliquam neque vitae sollicitudin iaculis. Phasellus ultrices porttitor velit, ac fringilla metus gravida non. Vestibulum ut varius est.
    </p>
    <p contenteditable="true">
    Praesent blandit quis velit bibendum convallis. Etiam tempus convallis nulla, a pretium mauris porta vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas non nisi est. Mauris quis elit non nisi elementum euismod sed quis nisi. Maecenas feugiat vel metus non mattis. Nunc nec molestie risus. Vestibulum nisl odio, elementum non vehicula non, mollis vel turpis. Donec imperdiet nulla urna, ac iaculis elit gravida eget. Sed volutpat diam eu magna sollicitudin, a lobortis sapien bibendum. Praesent mollis sem tortor, et malesuada turpis sodales ut. Aliquam eu laoreet metus. Etiam hendrerit elit ac vulputate bibendum.
    </p>
  </body>
</html>

